import React,{useState,useEffect,useLayoutEffect} from 'react';
import {
    StyleSheet,
    StatusBar,
    View,
    ScrollView,
    FlatList,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import { ImageHeaderScrollView } from 'react-native-image-header-scroll-view';
import { AntDesign, Ionicons } from '@expo/vector-icons';
import '../features/Phone';

const Article = ({route,navigation}) => {
    const [art,setArt] = useState({});

    const getData = () => {
        fetch('http://175.27.190.73:9000/article/'+route.params.id)
            .then(res=>res.json())
            .then(res=>{
                setArt(res.allArticle[0]);
            });
    }

    useEffect(()=>{
        getData();
    },[])

    return (
        <View style={{width:w, height:h}}>
            <ImageHeaderScrollView
                maxHeight={w*0.5}
                minHeight={h/10}
                headerImage={{uri:art.image}}
                renderForeground={() => (
                    <View style={{height:w*0.5, justifyContent:"center", alignItems:"center", backgroundColor:'rgba(0,0,0,0.2)'}} >
                        <Text style={{fontSize:18, fontWeight:'bold', color:'white'}}>{art.top1}</Text>
                        <Text style={{fontSize:14, color:'white', marginTop:10}}>{art.top2}</Text>
                    </View>
                )}
                >
                <View style={{width:w, backgroundColor:'#f0f0f0'}}>
                    <Text style={styles.txt}>{art.content1}</Text>
                    <Text style={styles.txt}>{art.content2}</Text>
                    <Text style={styles.txt}>{art.content3}</Text>
                    <Text style={styles.txt}>{art.content4}</Text>
                    <Text style={styles.txt}>{art.content5}</Text>
                    <Text style={styles.txt}>{art.content6}</Text>
                </View>
            </ImageHeaderScrollView>
            <View style={{
                width:w, height:h/10, padding:8,
                position:'absolute',
                flexDirection:'row', justifyContent:'space-between', alignItems:'flex-end',
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{navigation.goBack('Home')}}
                >
                    <Ionicons name="chevron-back" size={30} color="white" />
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={()=>{}}
                >
                    <Ionicons name="heart-outline" size={26} color="white" />
                </TouchableOpacity>
            </View>
        </View>
    )
};

const styles = StyleSheet.create({
    txt: {
        fontSize: 16,
        lineHeight: 25,
        marginTop: 20
    }
})

export default Article
